<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器管理</title>
</head>
<body>
<h1>容器管理</h1>

<h2>创建容器</h2>
<form id="create-form" action="/containers/create" method="post">
    镜像：<input type="text" id="image" name="image" value="ubuntu"><br>
    容器名称：<input type="text" id="container_name" name="container_name" value="my_container"><br>
    端口（主机端口:容器端口）：<input type="text" id="ports" name="ports" value="80:8080,443:8443"><br>
    内存（MB）：<input type="number" id="memory" name="memory" value="512" min="6"><br> <!-- 添加min属性 -->
    <input type="submit" id="create-button" value="创建">
</form>

<p id="create-message" style="color: red;"></p> <!-- 显示创建提示信息 -->

<h2>管理容器</h2>
<div id="containers-list">
    <!-- 这里将显示容器列表 -->
</div>

<h2>系统资源监视</h2>
<div id="system-resources">
    <!-- 这里将显示系统资源 -->
</div>

<script>
    // 页面加载时获取容器列表和系统资源监视
    window.onload = function() {
        fetchContainers();
        fetchSystemResources();
        setInterval(fetchSystemResources, 1000); // 每隔1秒刷新系统资源监视
    }

    // 获取容器列表并显示在页面上
function fetchContainers() {
    fetch('/containers')
    .then(response => response.json())
    .then(data => {
        var containersList = document.getElementById('containers-list');
        containersList.innerHTML = ''; // 清空容器列表
        data = JSON.parse(data)
        // 遍历 JSON 数组
        data.forEach(container => {
            var containerDiv = document.createElement('div');
            containerDiv.innerHTML = `<p>部署位置: ${container.location} | 容器ID: ${container.id} | 名称: ${container.name} | 状态: ${container.status}</p>
                                      <p>CPU 使用率: ${container.cpu_usage_percentage !== null ? container.cpu_usage_percentage.toFixed(2) + '%' : 'N/A'} |
                                      内存 使用: ${container.memory_usage.toFixed(2)} MB | 内存限制: ${container.memory_limit.toFixed(2)} MB |
                                      端口: ${JSON.stringify(container.ports)}</p>
                                      <button onclick="startContainer('${container.id}')">启动</button>
                                      <button onclick="stopContainer('${container.id}')">停止</button>
                                      <button onclick="restartContainer('${container.id}')">重启</button>
                                      <button onclick="deleteContainer('${container.id}')">删除</button>`;
            containersList.appendChild(containerDiv);

        });
    });
}







    // 获取系统资源并显示在页面上
    function fetchSystemResources() {
        fetch('/host_resources')
            .then(response => response.json())
            .then(data => {
                var systemResourcesDiv = document.getElementById('system-resources');
                systemResourcesDiv.innerHTML = `<p>CPU 使用率: ${data.cpu_percent.toFixed(2)}%</p>
                                                <p>内存 使用率: ${data.memory_percent.toFixed(2)}%</p>
                                                <p>内存 总量: ${formatBytes(data.memory_total)}</p>
                                                <p>内存 使用量: ${formatBytes(data.memory_used)}</p>`;
            });
    }

    // 格式化字节大小
    function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    // 创建容器时检查内存值是否低于6MB
    document.getElementById('create-form').addEventListener('submit', function(event) {
        event.preventDefault();
        var memoryInput = document.getElementById('memory');
        var memoryValue = memoryInput.value;
        if (memoryValue < 6) {
            var message = document.getElementById('create-message');
            message.textContent = '内存限制不能低于6MB'; // 显示警告信息
            memoryInput.value = ''; // 清空输入框
        } else {
            this.submit(); // 继续创建容器
        }
    });

    // 启动容器
    function startContainer(containerId) {
        fetch(`/containers/${containerId}/start`, { method: 'POST' })
            .then(() => fetchContainers()); // 启动后刷新容器列表
    }

    // 停止容器
    function stopContainer(containerId) {
        fetch(`/containers/${containerId}/stop`, { method: 'POST' })
            .then(() => fetchContainers()); // 操作完成后刷新容器列表
    }

    // 重启容器
    function restartContainer(containerId) {
        fetch(`/containers/${containerId}/stop_and_restart`, { method: 'POST' })
            .then(() => fetchContainers()); // 操作完成后刷新容器列表
    }

    // 删除容器
    function deleteContainer(containerId) {
        fetch(`/containers/${containerId}/delete`, { method: 'POST' })
            .then(() => fetchContainers()); // 删除后刷新容器列表
    }
</script>
</body>
</html>
